<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .massage-one{
            width: 350px;
            height: 210px;
            background-color: white;
            border-top: 2px solid yellow;
            border-bottom: 2px solid yellow;
            overflow: hidden;
            position: relative;
        }
        .massage-two{
            width: 350px;
            height: 210px;
            background-color: white;
            border-top: 2px solid yellow;
            border-bottom: 2px solid yellow;
            position: relative;
        }
        .massage-three{
            width: 350px;
            height: 210px;
            background-color: white;
            border-top: 2px solid yellow;
            border-bottom: 2px solid yellow;
            position: relative;
        }
        span{
            font-size: 10px;
        }
        #close-img{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 8px;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="massage-one"><p>W</p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore obcaecati dolorem explicabo qui ad libero officia illum, cumque, nemo delectus maiores, blanditiis possimus consequatur doloribus ea? Voluptate aliquam inventore excepturi maxime id consequatur repellat obcaecati ea ipsam labore. Reprehenderit quia, impedit dicta molestiae.</span></div>
    <div class="massage-two"><p>Y</p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore obcaecati dolorem explicabo qui ad libero officia illum, cumque, nemo delectus maiores, blanditiis possimus consequatur doloribus ea? Voluptate aliquam inventore excepturi maxime id consequatur repellat obcaecati ea ipsam labore. Reprehenderit quia, impedit dicta molestiae.</span></div>
    <div class="massage-three"><p>L</p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore obcaecati dolorem explicabo qui ad libero officia illum, cumque, nemo delectus maiores, blanditiis possimus consequatur doloribus ea? Voluptate aliquam inventore excepturi maxime id consequatur repellat obcaecati ea ipsam labore. Reprehenderit quia, impedit dicta molestiae.</span></div>

    <script>
        // 获取三个消息盒子的元素
        let msgone = document.querySelector('.massage-one');
        let msgtwo = document.querySelector('.massage-two');
        let msgthree = document.querySelector('.massage-three');
        // 创建三个按钮的元素
        let closeimg = document.createElement('div');
        let closeimg2 = document.createElement('div');
        let closeimg3 = document.createElement('div');
        closeimg.id = 'close-img';
        closeimg.innerHTML = '[x]';
        closeimg2.id = 'close-img';
        closeimg2.innerHTML = '[x]';
        closeimg3.id = 'close-img';
        closeimg3.innerHTML = '[x]';
        // 把这三个元素放到盒子里面 配合上方的样式进行定位
        let btnOne = msgone.appendChild(closeimg);
        let btnTwo = msgtwo.appendChild(closeimg2);
        let btnThree = msgthree.appendChild(closeimg3);
        //为三个按钮实现鼠标点击事件
        btnOne.onclick = function(){
            msgone.style.display = 'none';
        }
        btnTwo.onclick = function(){
            msgtwo.style.display = 'none';
        }
        btnThree.onclick = function(){
            msgthree.style.display = 'none';
        }
        
    </script>
</body>
</html>